<template>
  <div class="products">
    <input placeholder="搜索关键字" @keyup="keyChange"   v-model="query.key" />
    <div class="sorts">
      <span @click="changeSorted(0)" :class="{sort:true,active:query.sorted == 0}">综合</span>
      <span @click="changeSorted(1)" :class="{sort:true,active:query.sorted == 1}">销量</span>
      <span v-if="query.sorted == 3" @click="changeSorted(2)" :class="{sort:true,active:query.sorted == 3}">价格↑</span>
      <span v-else @click="changeSorted(3)" :class="{sort:true,active:query.sorted == 2}">价格↓</span>
    </div>
    <div calss="brands">
      <div :class="{brand:true,active:brand.selected}" @click="changeBrand(brand)" v-for="brand in brands" :key = "brand._id">
      {{brand.name}}
      </div>
      <div><span @click="clear">清空</span><span @click="ok">确定</span></div>
    </div>
    <div>
      <div>总共{{total}}条数据</div>
      <div v-for="product in rows" @click="goProduct(product.productId)" :key = "product._id">
        <img :src="product.productImg" />
        {{product.productName}}
      </div>
    </div>
  </div>
</template>

<script>
import api from "../api/index";
export default {
  name: "products",
  components: {

  },
  data() {
    return {
      total:0,
      query: {
        key: '',
        brandIds: '',
        sorted: 0,
        pageNum: 1,
      },
    };
  },
  methods: {
    goProduct(productId){
      this.$router.push({
            path:'/product',
            query:{ productId }
        })
    },
    keyChange(){
      this.getList()
    },
    changeSorted(sorted){
      this.query.sorted = sorted
      this.getList()
    },
    changeBrand(brand){
      brand.selected =!brand.selected

    },
    clear(){
      for(let i = 0; i < this.brands.length; i ++){
        this.brands[i].selected = false
      }
      this.query.brandIds = ''
      this.getList()
    },
    ok(){
      let brandIds = []
      for(let i = 0; i < this.brands.length; i ++){
        if(this.brands[i].selected) brandIds.push(this.brands[i]._id)
      }
      this.query.brandIds = brandIds.join(',')
      this.getList()
    },
    getList(){
      this.$http({
        url:'/products',
        params:this.query
      }).then(res =>{
        if(res.errorMsg){
          this.total = 0
          this.rows = []
        }else{
        this.total = res.total
        for(let i = 0; i < res.rows.length; i ++){
          let imgs = res.rows[i].productImgs.split(',')
          res.rows[i].productImg = api.baseURL + imgs[0]
        }
        this.rows = res.rows
        }
      })
    },
    getBrands(){
      this.$http({
        url:'/brands'
      }).then(res => {
        for(let i = 0; i < res.length; i++){
          res[i].selected = false
        }
        this.brands = res
      })

    }
  },
  created() {},
  mounted() {
    let query = this.$route.query
    this.query.key = query.key || ''
    this.getList()
    this.getBrands()
    // console.log(this.$router,this.$route)
  },
};
</script>

<style scoped>
.products{
  font-size:36px;
}
.sorts{
  display: flex;
}
.sort{
  flex:1;
}
.sort.active{
  color:#ff0000;
}
.brand.active{
  color:#ff0000;
}
</style>